<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery tablesorter 2.0 - CSS Column &amp; Row Highlights</title>

	<!-- jQuery -->
	<script src="js/jquery-latest.min.js"></script>

	<!-- Demo stuff -->
	<link rel="stylesheet" href="css/jq.css">
	<link href="css/prettify.css" rel="stylesheet">
	<script src="js/prettify.js"></script>
	<script src="js/docs.js"></script>

	<!-- Tablesorter: required -->
	<link rel="stylesheet" href="../css/theme.blue.css">
	<script src="../js/jquery.tablesorter.js"></script>

	<style>
	html {
		box-sizing: border-box;
	}
	*, *:before, *:after {
		box-sizing: inherit;
	}
	.block {
		width: 33.3%;
		float: left;
		padding: 10px;
	}
	@media all and (max-width: 1300px) {
		.block { width: 50%; }
	}
	@media all and (max-width: 900px) {
		.block { float: none; width: 100%; }
	}
	.hover-hl { color: #990; }
	.focus-hl { color: #3aa3c5; }
	</style>
	<style id="css">/* TABLE BACKGROUND color (match the original theme) */
table.hover-highlight td:before,
table.focus-highlight td:before {
	background: #fff;
}

/* ODD ZEBRA STRIPE color (needs zebra widget) */
.hover-highlight .odd td:before, .hover-highlight .odd th:before,
.focus-highlight .odd td:before, .focus-highlight .odd th:before {
	background: #ebf2fa;
}
/* EVEN ZEBRA STRIPE color (needs zebra widget) */
.hover-highlight .even td:before, .hover-highlight .even th:before,
.focus-highlight .even td:before, .focus-highlight .even th:before {
	background-color: #fff;
}

/* FOCUS ROW highlight color (touch devices) */
.focus-highlight td:focus::before, .focus-highlight th:focus::before {
	background-color: lightblue;
}
/* FOCUS COLUMN highlight color (touch devices) */
.focus-highlight td:focus::after, .focus-highlight th:focus::after {
	background-color: lightblue;
}
/* FOCUS CELL highlight color */
.focus-highlight th:focus, .focus-highlight td:focus,
.focus-highlight .even th:focus, .focus-highlight .even td:focus,
.focus-highlight .odd th:focus, .focus-highlight .odd td:focus {
	background-color: #d9d9d9;
	color: #333;
}

/* HOVER ROW highlight colors */
table.hover-highlight tbody > tr:hover > td, /* override tablesorter theme row hover */
table.hover-highlight tbody > tr.odd:hover > td,
table.hover-highlight tbody > tr.even:hover > td {
	background-color: #ffa;
}
/* HOVER COLUMN highlight colors */
.hover-highlight tbody tr td:hover::after,
.hover-highlight tbody tr th:hover::after {
	background-color: #ffa;
}

/* ************************************************* */
/* **** No need to modify the definitions below **** */
/* ************************************************* */
.focus-highlight td:focus::after, .focus-highlight th:focus::after,
.hover-highlight td:hover::after, .hover-highlight th:hover::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 999em;
	left: 0;
	top: -555em;
	z-index: -1;
}
.focus-highlight td:focus::before, .focus-highlight th:focus::before {
	content: '';
	position: absolute;
	width: 999em;
	height: 100%;
	left: -555em;
	top: 0;
	z-index: -2;
}
/* required styles */
.hover-highlight,
.focus-highlight {
	overflow: hidden;
}
.hover-highlight td, .hover-highlight th,
.focus-highlight td, .focus-highlight th {
	position: relative;
	outline: 0;
}
/* override the tablesorter theme styling */
table.hover-highlight, table.hover-highlight tbody > tr > td,
table.focus-highlight, table.focus-highlight tbody > tr > td,
/* override zebra styling */
table.hover-highlight tbody tr.even > th,
table.hover-highlight tbody tr.even > td,
table.hover-highlight tbody tr.odd > th,
table.hover-highlight tbody tr.odd > td,
table.focus-highlight tbody tr.even > th,
table.focus-highlight tbody tr.even > td,
table.focus-highlight tbody tr.odd > th,
table.focus-highlight tbody tr.odd > td {
	background: transparent;
}
/* table background positioned under the highlight */
table.hover-highlight td:before,
table.focus-highlight td:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: -3;
}</style>

	<script id="js">$(function() {
	// call the tablesorter plugin
	$("table").tablesorter({
		theme: 'blue'
	});

	// Make table cell focusable
	// http://css-tricks.com/simple-css-row-column-highlighting/
	if ( $('.focus-highlight').length ) {
		$('.focus-highlight').find('td, th')
			.attr('tabindex', '1')
			// add touch device support
			.on('touchstart', function() {
				$(this).focus();
			});
	}

});</script>
</head>
<body>
<div id="banner">
	<h1>table<em>sorter</em></h1>
	<h2>CSS Column &amp; Row Highlights</h2>
	<h3>Flexible client-side table sorting</h3>
	<a href="index.html">Back to documentation</a>
</div>
<div id="main">

	<p class="tip">
		<em>NOTE!</em>
	</p>
	<ul>
		<li>The css in this demo only works with <a href="http://caniuse.com/#feat=css-gencontent">modern browsers</a> (IE9+).</li>
		<li>This css is originally from this <a href="http://css-tricks.com/simple-css-row-column-highlighting/">CSS-Tricks</a> article; it has been modified to work with tablesorter themes.</li>
		<li>
			It does not work properly on cells with <code>rowspan</code> or <code>colspan</code> within the <code>tbody</code> (I am referring to info-only tbodies, since tablesorter does not yet support sorting with these spans); if you do need a script to highlight spanned columns &amp; rows, then take a look at the <a href="https://github.com/gajus/wholly">wholly</a> plugin.
			<p></p>
		</li>
		<li>To add <strong class="hover-hl">Hover</strong> Highlighting:
			<ul>
				<li>Add a class name of <code>&quot;<span class="hover-hl">hover-highlight</span>&quot;</code> to enable hover row and column highlighting.</li>
				<li>Include the CSS shown on this page.</li>
				<li>If needed, modify the table background color &amp; zebra striping row colors.</li>
				<li>Modify the hover highlight row and/or column color definitions as desired (they can be different colors).</li>
			</ul>
			<p></p>
		</li>
		<li>To add <strong class="focus-hl">Focus</strong> Highlighting:
			<ul>
				<li>Add a class name of <code>&quot;<span class="focus-hl">focus-highlight</span>&quot;</code> to enable focused cell with row and column highlighting.</li>
				<li>Click on a table cell in the demo below to see the highlight; only <em>one element</em>, per page, can be active at a time.</li>
				<li>Include the CSS and the extra javascript shown on this page to make table cells focusable.</li>
				<li>If needed, modify the table background color &amp; zebra striping row colors.</li>
				<li>Modify the focus highlight row and/or column color definitions as desired (they can be different colors).</li>
			</ul>
		</li>
	</ul>

<h1>Demo</h1>
<div id="demo">

<div class="block">
<h1><span class="hover-hl">Hover</span> + <span class="focus-hl">Focus</span> Highlight</h1>
<table class="tablesorter hover-highlight focus-highlight">
	<thead>
		<tr><th>Account #</th><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Diff</th></tr>
	</thead>
	<tbody>
		<tr><td>A43</td><td>Peter</td><td>Parker</td><td>28</td><td>9.99</td><td>20.3%</td><td>+3</td></tr>
		<tr><td>A255</td><td>John</td><td>Hood</td><td>33</td><td>19.99</td><td>25.1%</td><td>-7</td></tr>
		<tr><td>A33</td><td>Clark</td><td>Kent</td><td>18</td><td>2.89</td><td>44.2%</td><td>-15</td></tr>
		<tr><td>A1</td><td>Bruce</td><td>Almighty</td><td>45</td><td>153.19</td><td>44%</td><td>+19</td></tr>
		<tr><td>A102</td><td>Bruce</td><td>Evans</td><td>56</td><td>$153.19</td><td>23%</td><td>+9</td></tr>
		<tr><td>A256</td><td>John</td><td>Clark</td><td>44</td><td>($19.89)</td><td>25.1%</td><td>(5)</td></tr>
		<tr><td>A23</td><td>Elvis</td><td>Presley</td><td>24</td><td>($9.99)</td><td>50%</td><td>(22)</td></tr>
		<tr><td>A10</td><td>Frank</td><td>Carter</td><td>40</td><td>-12.99</td><td>20%</td><td>(6)</td></tr>
	</tbody>
</table>
</div>

<div class="block">
<h1><span class="hover-hl">Hover</span> Highlight Only</h1>
<table class="tablesorter hover-highlight">
	<thead>
		<tr><th>Account #</th><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Diff</th></tr>
	</thead>
	<tbody>
		<tr><td>A43</td><td>Peter</td><td>Parker</td><td>28</td><td>9.99</td><td>20.3%</td><td>+3</td></tr>
		<tr><td>A255</td><td>John</td><td>Hood</td><td>33</td><td>19.99</td><td>25.1%</td><td>-7</td></tr>
		<tr><td>A33</td><td>Clark</td><td>Kent</td><td>18</td><td>2.89</td><td>44.2%</td><td>-15</td></tr>
		<tr><td>A1</td><td>Bruce</td><td>Almighty</td><td>45</td><td>153.19</td><td>44%</td><td>+19</td></tr>
		<tr><td>A102</td><td>Bruce</td><td>Evans</td><td>56</td><td>$153.19</td><td>23%</td><td>+9</td></tr>
		<tr><td>A256</td><td>John</td><td>Clark</td><td>44</td><td>($19.89)</td><td>25.1%</td><td>(5)</td></tr>
		<tr><td>A23</td><td>Elvis</td><td>Presley</td><td>24</td><td>($9.99)</td><td>50%</td><td>(22)</td></tr>
		<tr><td>A10</td><td>Frank</td><td>Carter</td><td>40</td><td>-12.99</td><td>20%</td><td>(6)</td></tr>
	</tbody>
</table>
</div>

<div class="block">
<h1><span class="focus-hl">Focus</span> Highlight Only <small>(click on a tbody cell)</small></h1>
<table class="tablesorter focus-highlight">
	<thead>
		<tr><th>Account #</th><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Diff</th></tr>
	</thead>
	<tbody>
		<tr><td>A43</td><td>Peter</td><td>Parker</td><td>28</td><td>9.99</td><td>20.3%</td><td>+3</td></tr>
		<tr><td>A255</td><td>John</td><td>Hood</td><td>33</td><td>19.99</td><td>25.1%</td><td>-7</td></tr>
		<tr><td>A33</td><td>Clark</td><td>Kent</td><td>18</td><td>2.89</td><td>44.2%</td><td>-15</td></tr>
		<tr><td>A1</td><td>Bruce</td><td>Almighty</td><td>45</td><td>153.19</td><td>44%</td><td>+19</td></tr>
		<tr><td>A102</td><td>Bruce</td><td>Evans</td><td>56</td><td>$153.19</td><td>23%</td><td>+9</td></tr>
		<tr><td>A256</td><td>John</td><td>Clark</td><td>44</td><td>($19.89)</td><td>25.1%</td><td>(5)</td></tr>
		<tr><td>A23</td><td>Elvis</td><td>Presley</td><td>24</td><td>($9.99)</td><td>50%</td><td>(22)</td></tr>
		<tr><td>A10</td><td>Frank</td><td>Carter</td><td>40</td><td>-12.99</td><td>20%</td><td>(6)</td></tr>
	</tbody>
</table>
</div>

<div class="block">
<h1>Zebra + <span class="hover-hl">Hover</span> + <span class="focus-hl">Focus</span> Highlight</h1>
<table class="tablesorter hover-highlight focus-highlight widget-zebra">
	<thead>
		<tr><th>Account #</th><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Diff</th></tr>
	</thead>
	<tbody>
		<tr><td>A43</td><td>Peter</td><td>Parker</td><td>28</td><td>9.99</td><td>20.3%</td><td>+3</td></tr>
		<tr><td>A255</td><td>John</td><td>Hood</td><td>33</td><td>19.99</td><td>25.1%</td><td>-7</td></tr>
		<tr><td>A33</td><td>Clark</td><td>Kent</td><td>18</td><td>2.89</td><td>44.2%</td><td>-15</td></tr>
		<tr><td>A1</td><td>Bruce</td><td>Almighty</td><td>45</td><td>153.19</td><td>44%</td><td>+19</td></tr>
		<tr><td>A102</td><td>Bruce</td><td>Evans</td><td>56</td><td>$153.19</td><td>23%</td><td>+9</td></tr>
		<tr><td>A256</td><td>John</td><td>Clark</td><td>44</td><td>($19.89)</td><td>25.1%</td><td>(5)</td></tr>
		<tr><td>A23</td><td>Elvis</td><td>Presley</td><td>24</td><td>($9.99)</td><td>50%</td><td>(22)</td></tr>
		<tr><td>A10</td><td>Frank</td><td>Carter</td><td>40</td><td>-12.99</td><td>20%</td><td>(6)</td></tr>
	</tbody>
</table>
</div>

<div class="block">
<h1>Zebra + <span class="hover-hl">Hover</span> Highlight Only</h1>
<table class="tablesorter hover-highlight widget-zebra">
	<thead>
		<tr><th>Account #</th><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Diff</th></tr>
	</thead>
	<tbody>
		<tr><td>A43</td><td>Peter</td><td>Parker</td><td>28</td><td>9.99</td><td>20.3%</td><td>+3</td></tr>
		<tr><td>A255</td><td>John</td><td>Hood</td><td>33</td><td>19.99</td><td>25.1%</td><td>-7</td></tr>
		<tr><td>A33</td><td>Clark</td><td>Kent</td><td>18</td><td>2.89</td><td>44.2%</td><td>-15</td></tr>
		<tr><td>A1</td><td>Bruce</td><td>Almighty</td><td>45</td><td>153.19</td><td>44%</td><td>+19</td></tr>
		<tr><td>A102</td><td>Bruce</td><td>Evans</td><td>56</td><td>$153.19</td><td>23%</td><td>+9</td></tr>
		<tr><td>A256</td><td>John</td><td>Clark</td><td>44</td><td>($19.89)</td><td>25.1%</td><td>(5)</td></tr>
		<tr><td>A23</td><td>Elvis</td><td>Presley</td><td>24</td><td>($9.99)</td><td>50%</td><td>(22)</td></tr>
		<tr><td>A10</td><td>Frank</td><td>Carter</td><td>40</td><td>-12.99</td><td>20%</td><td>(6)</td></tr>
	</tbody>
</table>
</div>

<div class="block">
<h1>Zebra + <span class="focus-hl">Focus</span> Highlight Only <small>(click on a tbody cell)</small></h1>
<table class="tablesorter focus-highlight widget-zebra">
	<thead>
		<tr><th>Account #</th><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Diff</th></tr>
	</thead>
	<tbody>
		<tr><td>A43</td><td>Peter</td><td>Parker</td><td>28</td><td>9.99</td><td>20.3%</td><td>+3</td></tr>
		<tr><td>A255</td><td>John</td><td>Hood</td><td>33</td><td>19.99</td><td>25.1%</td><td>-7</td></tr>
		<tr><td>A33</td><td>Clark</td><td>Kent</td><td>18</td><td>2.89</td><td>44.2%</td><td>-15</td></tr>
		<tr><td>A1</td><td>Bruce</td><td>Almighty</td><td>45</td><td>153.19</td><td>44%</td><td>+19</td></tr>
		<tr><td>A102</td><td>Bruce</td><td>Evans</td><td>56</td><td>$153.19</td><td>23%</td><td>+9</td></tr>
		<tr><td>A256</td><td>John</td><td>Clark</td><td>44</td><td>($19.89)</td><td>25.1%</td><td>(5)</td></tr>
		<tr><td>A23</td><td>Elvis</td><td>Presley</td><td>24</td><td>($9.99)</td><td>50%</td><td>(22)</td></tr>
		<tr><td>A10</td><td>Frank</td><td>Carter</td><td>40</td><td>-12.99</td><td>20%</td><td>(6)</td></tr>
	</tbody>
</table>
</div>



</div>
	<br class="clear"/>

	<h1>CSS</h1>
	<div id="css">
		<pre class="prettyprint lang-css"></pre>
	</div>
	<h1>Javascript</h1>
	<div id="javascript">
		<pre class="prettyprint lang-javascript"></pre>
	</div>

</div>

<script>
/* highlight hover & focus selectors in the syntax highlighted code */
$(window).on('load', function(){
	setTimeout(function(){
		// css
		$('.pln:contains(highlight)').each(function(){
			var $this = $(this),
				$prev = $this.prev().prev(),
				text = $prev.text() || '',
				type = /hover/.test(text) ? 'hover-hl' : /focus/.test(text) ? 'focus-hl' : '';
			if (type) {
				$this.html(function(i,h){
					return h.replace('highlight', '<span>highlight</span>');
				});
				// "highlight".. "-" .... "hover"/"focus" ... "."
				$this.find('span').add( $prev ).add( $this.prev() ).add( $prev.prev() ).addClass(type);
			}
		});
		// js
		$('.str:contains(focus-highlight)').addClass('focus-hl');
	}, 500);
});
</script>


</body>
</html>
